<template>
  <div class="flex-item-24 flex-column content">
    <image mode="aspectFill" :src="card.menu&&card.menu[0]&&card.menu[0].image" alt=""/>
    <div class="flex-row" style="min-height:180rpx;">
      <div v-for="(item,index) in card.menu" class="menu flex-column"
       :key="index">{{item.name}} ￥{{item.price}} 
       <span style="font-size:10px;color:#444;margin:0 5px;" v-if="item.discount>0">（折扣：{{item.discount}} ）</span> x {{item.num}}</div>
      <div class="time">{{card.time}}</div>
    </div>
    <div class="flex-row flex-right flex-item">
        <div class="money">￥{{card.amount}}</div>
      <div class="status">{{card.status}}</div>
        <!-- <div class="flex-row flex-bottom" style="heigth:65%"> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // key: value
    }
  },
  props: {
    card: {
      type: Object,
      default: function() {
        return {}
      },
    },
  },
}
</script>

<style>
.card {
  padding: 10px;
}
.content {
  color: #222;
}
.content image {
  border-radius: 2px;
  width: 50px;
  max-height: 50px;
  margin: 5px 10px;
}
.menu {
  font-size: 13px;
  line-height: 25px;
  color: #333;
  min-width: 150px;
  max-width: 200px;
  overflow: hidden;
}
.time {
  font-size: 10px;
  line-height: 2.5;
  color: #666;
}
.status {
  color: #555;
  padding: 2px 0 0 0;
  /* border-radius: 5px; */
  /* border: 1px solid rgb(105, 199, 68); */
  font-size: 11px;
  font-weight: 900;
}
.money {
  font-weight: 900;
  font-size: 16px;
  color: red;
}
</style>
